<template>
  <el-dialog @close="reset" :title="specsData.id>0?'编辑':'新增'" :visible.sync="info.isShow">
      <el-form ref="specsForm" label-width="80px" :model="specsData"  :rules="rules">
          <el-form-item label="规格名称" prop="specsname">
              <el-input placeholder="规格名称" v-model="specsData.specsname"></el-input>
          </el-form-item>
          <el-form-item label="规格属性" prop="attrs">
              <div class="item" v-for="(item,index) in specsAttrs" :key="index">
                  <el-input placeholder="规格属性" v-model="specsAttrs[index]"></el-input>
                  <el-button v-if="index===0" type="success" @click="addSpecsAttr">新增</el-button>
                  <el-button v-else type="warning" @click="removeSpecsAttr(index)">移除</el-button>
              </div>
          </el-form-item>
          <el-form-item label="规格状态" prop="status">
              <el-radio-group v-model="specsData.status">
                  <el-radio :label="1">正常</el-radio>
                  <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
export default {
    props:['info'],
    data(){
        // 自定义表单校验函数
        const validAttrs=(rule,value,callback)=>{
            // 假设数组的每一个元素都不为空
            let flag=true;
            this.specsAttrs.forEach(item => {
                if(item===''){
                    // 推翻假设
                    flag=false;
                }    
            }); 
            // 表单校验通过
            if(flag){
               return callback();
            }
            callback(new Error('请输入规格属性'));
        }

        return {
            // 控制规格输入框的数量
            specsAttrs:[''],
            // 表单数据
            specsData:{
                specsname:'',   // 规格名称
                attrs:'',   // 规格属性
                status:'',  // 规格状态
            },
            // 表单校验规则
            rules:{
                specsname:{required:true,message:'请输入规格名称',trigger:'blur'},
                status:{required:true,message:'请选择状态',trigger:'blur'},
                attrs:{validator:validAttrs,trigger:'blur'}
            }
        }
    },
    methods:{
        // 更新表单数据
        setFormData(obj){
            this.specsData={...obj};
            this.specsAttrs=[...obj.attrs];
        },  
        // 重置数据
        reset(){
            // 重置表单数据
            this.specsData={
                id:'',
                specsname:'',
                attrs:'',
                status:''
            }
            this.specsAttrs=[''];
            // 关闭对话框组件
            this.info.isShow=false;
        },
        // 提交数据
        submit(){
            this.$refs.specsForm.validate(valid=>{
                if(valid){
                    // 表单校验通过
                    // 手动同步attrs
                    this.specsData.attrs=this.specsAttrs.join(',');
                    const url=this.specsData.id>0?'/specsedit':'/specsadd';
                    this.$axios.post(url,this.specsData).then(res=>{
                        if(res.code===200){
                            this.$message.success(res.msg);
                            // 更新数据: 通知父组件更新
                            this.$emit('updateSpecs');
                            // 数据重置
                            this.reset();

                        }else{
                            this.$message.error(res.msg);
                        }
                    });
                }
            });
        },
        addSpecsAttr(){
            if(this.specsAttrs.length>=5){
                this.$message.warning('最多只能添加5个');
                return false;
            }
            this.specsAttrs.push('');
        },
        removeSpecsAttr(index){
            this.specsAttrs.splice(index,1);
        }
    }
}
</script>

<style scoped>
.item{
    display: flex;
    margin: 5px;
}
</style>